<template>
	<view class="main-body" :style="{backgroundImage:'url('+picUrl+'/static/img/background.jpg)'}">
		<view class="text-center" style="margin-top: 60px;">
			<view class="zai-title zai-title2">临渭区VOCs监管
				<image src="../../static/img/btn.png" @click="show = true" class="btn" alt="" />
			</view>
		</view>
		<u-popup :show="show" mode="left" @close="close" @open="open">
			<view>
				<scroll-view scroll-y class="page">

					<view class="UCenter-bg" style="background-image: none;">
						<image :src="personalList.avatar" class="png round animation-slide-right mb5"
							mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image>
							 <text class="text-grey ft15">{{personalList.username}}</text>
					</view>
				<!-- 	<view class="padding flex text-center text-grey bg-white shadow-warp">
					  <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
					    <view class="text-xl text-orange">{{personalList.username}}</view>
								  <view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
					  </view>
					  
					 <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
					    <view class="text-xl text-green">{{personalList.post?personalList.post:'员工'}}</view>
					    <view class="margin-top-sm"><text class="cuIcon-news"></text> 职务</view>
					  </view>
					</view> -->
					<!-- 列表list-->
					<view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius">
						<navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/changePwd"
							:style="[{animationDelay: '0.6s'}]">
							<view class="content">
								<text class="cuIcon-settingsfill text-cyan"></text>
								<text class="text-grey">密码修改</text>
							</view>
						</navigator>
						<navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]"
							hover-class="none">
							<view class="content" @tap="logout">
								<text class="cuIcon-exit text-cyan"></text>
								<text class="text-grey">退出登录</text>
							</view>
						</navigator>
					</view>
					<view class="cu-tabbar-height"></view>
				</scroll-view>
			</view>
		</u-popup>
		<view class="zai-box">
			<u-modal title="提示" :content="content" :show="show3" showCancelButton closeOnClickOverlay @confirm="confirm"
				@cancel="cancel" @close="close"></u-modal>
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<view style="height: 10px;"></view>
			<view class="box1">
				<view class="quyu" @tap="goPage(1,2,'',false)">
					<view class="xuncha">当日巡查</view>
					<view class="lvbox">{{todayNum}}</view>
				</view>
				<view class="quyu" @tap="goPage(4,2,'',true)">
					<view class="xuncha">累计巡查</view>
					<view class="lvbox">{{totalNum}}</view>
				</view>
			</view>
			<view style="height: 10px;"></view>
			<view class="box2">
				<view class="quyu" @tap="goPage3()"  :style="{backgroundImage:'url('+picUrl+'/static/img/box1.png)'}" style="
					background-size: cover;">
					巡查上报
				</view>
				<view class="quyu" @tap="goPage(4,'',1,false)"   :style="{backgroundImage:'url('+picUrl+'/static/img/box2.png)'}" style="
					background-size: cover;">
					巡查记录
				</view>
			</view>
			<!-- <view class="cu-card">
				<view class="cu-item bg-img shadow-blur" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="toChild"
					:data-url="item.url" v-for="(item,index) in list" :key="index">
					<view class="cardTitle">
						{{item.title}}
					</view>
				</view>
			</view> -->
		</view>
	</view>

</template>

<script>
	import api from '@/api/api'
	import {
		mapActions
	} from "vuex"
	import configService from '@/common/service/config.service.js';
	
	export default {
		data() {
			return {
				username: '',
				picUrl:configService.picURL,
				//删除OpenId接口url
				delUrl: '/pollution/delAuthInfo', 
				userUrl:'/sys/user/queryById',
				userId: '',
				userIdentity: '',
				personalList: {
					avatar: '../../static/img/touxiang.png',
					realname: '',
					username: '',
					post: ''
				},
				elements: [{
					title: '退出',
					name: 'exit',
					color: 'cyan',
					cuIcon: 'newsfill',
					auth: 'ac'
				}],
				content: '请确认退出登录？',
				show3: false,
				list: [{
						title: '修改密码',
						iconUrl: '../../static/img/edits.png'
					},
					// {
					// 	title: '无标题',
					// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png'
					// },
				],
				//接口url
				dataUrl: '/pollution/getPollutionCount', //当前用电量
				todayNum: '',
				totalNum: '',
				show: false,
				swiperList: [{
						id: 1,
						type: 'image',
						url: `${configService.picURL}/static/img/banner.png`,
						link: ''
					}, {
						id: 2,
						type: 'image',
						url: `${configService.picURL}/static/banner/banner2.png`,
						link: ''
					}, {
						id: 3,
						type: 'image',
						url: `${configService.picURL}/static/banner/banner3.png`,
						link: ''
					},
				],
				list: [{
						title: '索引列表',
						img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
						url: '../plugin/indexes'
					},
					{
						title: '微动画',
						img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
						url: '../plugin/animation'
					}
				]
			}
		},
		onShow: function() {
		  console.log("onShow调用了");
		  this.getSelect();
		},
		onLoad: function() {
			console.log(this.$store.getters)
			console.log(this.$store.getters.openid)
			uni.showLoading({
				title: '加载中...',
			});
			let that = this;
			// setTimeout(()=>{
			// 	console.log(that.$store.getters.openid)
			// 	that.personalList.username = that.$store.getters.nickname;
			// 	that.userId = that.$store.getters.userid;
			// 	 console.log(that.personalList.username)
			// },3000)
			
			this.userIdentity = this.$store.getters.userIdentity
			this.getSelect();
			this.personalList.username = this.$store.getters.nickname;
			this.userId = this.$store.getters.userid;
			 //this.load()
			 console.log(this.personalList.username)
			// this.load();
	
		},
		methods: {
			//删除OpenId
			delOpenId(){
				// let params = {
				// 	openId:
				// }
				console.log(this.$store.getters.openid)
				let url = this.delUrl+'?openId='+this.$store.getters.openid
				this.$http.post(url).then(res => {
					console.log(res)					
					if (res.data.code == 200) {
						console.log(res.data)
					}
				
				}).catch((error) => {
					console.log(error)
				
				});
				
			},
			load() {
				if (!this.userId) {

					return;
				}
				this.$http.get(this.userUrl, {
					params: {
						id: this.userId
					}
				}).then(res => {
					console.log("res", res)
					if (res.data.success) {
						let perArr = res.data.result
						// let avatar = (perArr.avatar && perArr.avatar.length > 0) ? api.getFileAccessHttpUrl(perArr
						// 	.avatar) : '../../static/img/touxiang.png'
						// this.personalList.avatar = avatar
						this.personalList.realname = perArr.realname
						this.personalList.username = perArr.username
						this.personalList.depart = perArr.departIds
					}
				}).catch(err => {
					console.log(err);
				});

			},
			logout() {
				this[`show3`] = true
				this.personalList.username = this.$store.getters.nickname;
				this.show = false
			},
			confirm() {
				this.show3 = false;
				this.delOpenId();
				api.logout().then(res => {
					console.log(res)
					if (res.data.code == 200) {													
						// this.$tip.success('退出成功!')
						setTimeout(() => {
							uni.clearStorageSync();	
							this.$Router.replaceAll({
								name: 'login'
							})
						}, 1000)
					}

				})
				console.log('confirm');
			},
			cancel() {
				this.show3 = false;
				
			},
			//查询图表统计数据
			getSelect() {
				this.$http.get(this.dataUrl).then(res => {
					console.log(res)
					 uni.hideLoading()
					if (res.data.code == 200) {
						console.log(res.data.result)
						this.todayNum = res.data.result.todayNum
						this.totalNum = res.data.result.totalNum
					}

				}).catch((error) => {
					console.log(error)
					uni.hideLoading()
					//  uni.showToast({
					// icon: 'none',
					// title: `${error}`
					// });
				});
			},
			goPage3() {

				// this.$Router.push({
				// 	name: 'pollutiondetail',
				// 	query:{'type':0}
				// })
				uni.navigateTo({
					url: "/pages/pollution/newDetail?type=0"
				})
				// this.$Router.push({path:'/pages/pollution/detail',query:{type:0}})

			},
			goPage(checkTime, status,type,isAll) {
				if (type==''&&this.userIdentity == 1) {
					return
				}
				uni.navigateTo({
					url: "/pages/pollution/newIndex?checkTime=" + checkTime + "&status=" + status + "&queryType=" + type+"&isAll=" + isAll
				})
				// uni.navigateTo({
				// 	url: "/pages/pollution/index?checkTime=" + checkTime + "&status=" + status + "&queryType=" + type+"&isAll=" + isAll
				// })
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toChild(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
		}
	}
</script>

<style lang="scss">
	.main-body {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.btn {
		display: inline-block;
		width: 60upx;
		height: 60upx;
		position: absolute;
		left: 10px;
		top: -8px;
	}
	/deep/ .screen-swiper{
		height: 30%;
		min-height: 100px !important;
	}

	.zai-box {
		margin: 0 20.71upx;
		/* padding-top: 232.85upx; */
		position: relative;
		border-radius: 17.86upx;
		overflow: hidden;
        height: calc(100% - 107px);
		.box1 {
			width: 100%;
			height: 24%;

			.quyu {
				// width: 271.43upx;
				width: 40%;
				height: 217.86upx;

				.xuncha {
					width: 100%;
					height: 108.57upx;
					background-color: #ffffff;
					font-size: 38.57upx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 108.57upx;
					color: #313131;
					text-align: center;
				}

				.lvbox {
					font-size: 51.43upx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 108.57upx;
					color: #00ccc5;
					text-align: center;
				}

				background-color: #e2f5f1;
				border-radius: 7.14upx;
			}

			background-color: #ffffff;
			border-radius: 17.86upx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
		}

		.box2 {
			width: 100%;
			height: calc(46% - 28px);
			padding: 2% 0;
			margin-bottom: 20px;
			// box-sizing: content-box;

			.quyu {
				// width: 100%;
				// padding-top: 38.57upx;
				// box-sizing: content-box;
				// padding-bottom: 38.57upx;
				height: 48%;
				font-size: 67.14upx;
				font-weight: bold;
				line-height: 229.29upx;
				color: #00ad7a;
				padding-left: 65.71upx;
				margin: 0 20px;

				// &:last-child {
				// 	margin-top: 2%;
				// }

				// &:first-child {
				// 	background: url(../../static/img/box1.png) no-repeat;
				// 	background-size: 100% 100%;
				// }

				border-radius: 7.14upx;


			}

			background-color: #ffffff;
			border-radius: 17.86upx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

		}
	}

	.zai-logo {
		width: 200upx;
		height: 150px;
	}

	.box {
		width: 100%;
		height: 577.14upx;
		background-color: #5C64B1;
		border-radius: 21.42upx;
		padding-top: 69.28upx;
		/* opacity: 0.3; */
	}

	.zai-title {
		/* width: 574px; */
		height: 56.42upx;
		font-family: MicrosoftYaHei;
		/* 	font-size: 57.14upx; */
		font-weight: bold;
		font-stretch: normal;
		line-height: 56.42upx;
		letter-spacing: 0px;
		color: #ffffff;
		/* font-size: 54px; */
		/* font-weight: bold;
			font-stretch: normal;
			line-height: 16px;
			letter-spacing: 0px;
			color: #ffffff; */
		/* font-size: 58upx;
		color: #000000; */
		/* text-align: center; */
	}

	.zai-title2 {
		margin-top: 38.57upx;
		margin-bottom: 52.14upx;
		height: 43.57upx;
		font-size: 38.57upx;
		line-height: 35.71upx;
		position: relative;
	}

	.UCenter-bg {
		/* #ifdef MP-WEIXIN */
		background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
		/* #endif */
		/* #ifndef MP-WEIXIN */
		background-image: url('/static/blue.png');
		/* #endif */
		background-size: cover;
		height: 400rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		// font-weight: 300;
		// text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		// opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}
	.cardTitle {
		color: #fff;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}

	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}
	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	}
</style>
